<template>
	<div class="hy-form">
		<div class="hy-form-header">
			<slot name="header"></slot>
		</div>
		<el-form :label-width="labelWidth">
			<el-row>
				<template v-for="item in formItems" :key="item.label">
					<el-col v-bind="colLayout">
						<el-form-item
              v-if="!item.isHidden"
							:label="item.label + ':'"
							:rules="item.rules"
							:style="itemStyle"
						>
							<template
								v-if="item.type === 'input' || item.type === 'password'"
							>
								<el-input
									:placeholder="item.placeholder"
									:show-password="item.type === 'password'"
									v-bind="item.otherOptions"
									v-model="formData[item.field]"
								>
								</el-input>
							</template>
							<template v-else-if="item.type === 'select'">
								<el-select
									:placeholder="item.placeholder"
									v-bind="item.otherOptions"
									v-model="formData[item.field]"
								>
									<el-option
										v-for="subItem in item.options"
										:key="subItem.value"
										:value="subItem.value"
										>{{ subItem.title }}</el-option
									>
								</el-select>
							</template>
							<template v-else-if="item.type === 'datepicker'">
								<el-date-picker
									v-bind="item.otherOptions"
									v-model="formData[item.field]"
								>
								</el-date-picker>
							</template>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<div class="hy-form-footer">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script lang="ts">
	import { defineComponent, PropType, ref, watch } from 'vue'
	import { IFormItem } from '../types/index'
	export default defineComponent({
		props: {
			formItems: {
				type: Array as PropType<IFormItem[]>,
				default: () => []
			},
			labelWidth: {
				type: String,
				default: '100px'
			},
			itemStyle: {
				type: Object,
				default: () => ({ padding: '10px 40px' })
			},
			colLayout: {
				type: Object,
				default: () => ({
					xl: 6,
					lg: 8,
					md: 12,
					// sm:24,
					xs: 24
				})
			},
			modelValue: {
				type: Object,
				required: true
			}
		},
		emits: ['update:modelValue'],
		setup(props, { emit }) {
			const formData = ref({ ...props.modelValue })
			watch(
				formData,
				(newValue) => {
					emit('update:modelValue', newValue)
				},
				{ deep: true }
			)
			return {
				formData
			}
		}
	})
</script>


<style lang="less" scoped>
	.hy-form {
		padding-top: 22px;
		.hy-form-footer {
			text-align: right;
			padding: 0px 50px 30px 10px;
		}
	}
</style>